<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view class="coupon_list">
				<view class="coupon_item" v-for="item in list" :key="item.coupon_id">
					<view :class="['price_info', item.istype == 1 ? 'price1_info' : '', item.istype == 3 ? 'price2_info' : '']">
						<view>
							<view>
								<text>￥</text>
								<text>{{ item.disprice }}</text>
							</view>
							<text v-if="item.istype == 2">限门店使用</text>
							<text v-if="item.istype == 1">限APP使用</text>
							<text v-if="item.istype == 3">通用券</text>
						</view>
						<view>
							<text>满{{ item.maxprice }}减{{ item.disprice }}</text>
							<text>满{{ item.maxprice }}可用</text>
						</view>
						<button @tap="achieveCoupon(item)" v-if="item.istype==1" style="margin-left: auto;margin-right: 5vw;width: 140rpx;color: #EB5D4B;border-radius: 60rpx;" size="mini" type="default" class="grace-button">领取</button>
						<button @tap="achieveCoupon(item)" v-else-if="item.istype==3" style="margin-left: auto;margin-right: 5vw;width: 140rpx;color: #56BB76;border-radius: 60rpx;" size="mini" type="default" class="grace-button">领取</button>
						<button @tap="achieveCoupon(item)" v-else style="margin-left: auto;margin-right: 5vw;width: 140rpx;color: #8EB4F2;border-radius: 60rpx;" size="mini" type="default" class="grace-button">领取</button>
					</view>
					<view class="time_info">截止日期：{{ item.end_time }}</view>
					<view class="intro">{{ item.description }}</view>
				</view>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
export default {
	data() {
		return {
			list: []
		};
	},
	onLoad() {
		this.getData()
	},
	methods: {
		getData: function () {
			this.gRequest.get('/coupon/getAllcoupon', {
				member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id
			}, res => {
				this.setData({ list: res.data });
			});
		},
		achieveCoupon: function (item){
			this.gRequest.post('/coupon/getCoupon', {
				member_id:JSON.parse(uni.getStorageSync("userInfo")).member_id,
				coupon_id:item.coupon_id
			}, 'form', {}, res => {
				if(res.status==1) {
					uni.showToast({ title: "领取成功", icon: 'none' });
					this.getData()
				}else {
					uni.showToast({ title: res.msg, icon: 'none' });
				}
			});
		}
	},
	components: {
		gracePage
	}
};
</script>
<style>
page {
	background: #f9f9f9;
}
</style>
<style lang="scss">
.coupon_list {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 5.333vw 53px;
}
.coupon_item {
	width: 100%;
	height: auto;
	border-radius: 3vw;
	overflow: hidden;
	background-color: #ffffff;
	padding-bottom: 4vw;
	margin-top: 4vw;
	box-shadow: 0px 0px 1.5vw 0px rgba(0, 0, 0, 0.5);
}
.coupon_item .price_info {
	width: 100%;
	height: 19.2vw;
	background-image: url(../../static/coupon_bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.price1_info {
	background-image: url(../../static/coupon_bg1.png) !important;
}
.price2_info {
	background-image: url(../../static/coupon_bg2.png) !important;
}
.coupon_item .price_info > view:nth-child(1) {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-left: 3vw;
}
.coupon_item .price_info > view:nth-child(1) > text {
	width: 18.6667vw;
	text-align: center;
	height: 5.333vw;
	line-height: 5.333vw;
	border: 1px solid #ffffff;
	border-radius: 2.67vw;
	font-size: 3.2vw;
	color: #ffffff;
}
.coupon_item .price_info > view:nth-child(1) > view {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	color: #ffffff;
}
.coupon_item .price_info > view:nth-child(1) > view > text:nth-child(1) {
	font-size: 3.2vw;
}
.coupon_item .price_info > view:nth-child(1) > view > text:nth-child(2) {
	font-size: 6.4vw;
	font-weight: 600;
}
.coupon_item .price_info > view:nth-child(2) {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #ffffff;
	margin-left: 3.333vw;
}
.coupon_item .price_info > view:nth-child(2) text:nth-child(1) {
	font-size: 4.267vw;
}
.coupon_item .price_info > view:nth-child(2) text:nth-child(2) {
	font-size: 3.2vw;
	margin-top: 1vw;
}
.coupon_item .time_info {
	font-size: 3.733vw;
	color: #808080;
	padding-left: 4vw;
	padding-right: 4vw;
	margin-top: 4vw;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.coupon_item .time_info image.right {
	width: 2.13vw;
	height: auto;
}
.coupon_item .time_info image.down {
	width: 3.4667vw;
	height: auto;
}
.coupon_item .intro {
	font-size: 3.2vw;
	color: #999999;
	line-height: 4.8vw;
	padding: 2vw 4vw 0;
}
</style>
